<template>
  <div class="remix-icon-container">
    <div class="remix-icon-container">
      <el-row>
        <el-col :span="24">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="图标名称">
              <el-input v-model="formInline.iconName"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">
                <i class="el-icon-search"></i>
                查询
              </el-button>
            </el-form-item>
            <el-form-item label="文字大小">
              <el-input-number v-model="fontSize" :min="12" :max="40" label="描述文字"></el-input-number>
              <span style="margin-left: 10px">px</span>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="checked">多彩图标</el-checkbox>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="icons">
        <el-col :span="2"
                v-for="(item,index) in iconList.slice((pages.pageNum-1)*pages.pageSize,pages.pageNum*pages.pageSize)"
                :key="index"
                :id="`tag-read-${index}`" :data-clipboard-text="clipboardText(item.name).replace('className','class')"
                @click.native="copyIcon(item.name,index)"
        >
          <el-card shadow="hover">
            <i :class="item.name" :style="{color: checked?randomRgbColor():'grey',fontSize: `${fontSize}px`}"></i>
          </el-card>
          <div class="icon-text">{{ item.name.replace('ri-', '') }}</div>
        </el-col>
      </el-row>
      <Pagination :total="iconList.length" :pageNum.sync="pages.pageNum"
                  :limit.sync="pages.pageSize"
      ></Pagination>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination/Pagination'
import { iconList } from '@/utils/icon'
import Clipboard from 'clipboard'
import { randomRgbColor } from '@/utils/randomRgbColor'
export default {
  name: 'fresh',
  components: { Pagination },
  data() {
    return {
      randomRgbColor:randomRgbColor,
      pages: {
        pageNum: 1,
        pageSize: 72
      },
      dataList:iconList,
      iconList: iconList,
      checked: false,
      fontSize: 28,
      formInline: {
        iconName: '',
        region: ''
      }
    }
  },
  methods: {
    clipboardText(name) {
      return `<i class="${name}"></i>`
    },
    copyIcon(name, index) {
      let clipboard = new Clipboard(`#tag-read-${index}`)
      clipboard.on('success', e => {
        // 释放内存
        this.$message({
          message: `拷贝<i class="${name}"></i>成功`,
          type: 'success'
        })
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$message.error('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    },
    onSubmit() {
      let list = []
      this.iconList = this.dataList
      for (let i = 0; i < this.iconList.length; i++) {
        if (this.iconList[i].name.indexOf(this.formInline.iconName)>= 0){
          list.push(this.iconList[i])
        }
      }
      this.iconList = list
    }
  }
}
</script>

<style scoped lang="scss">
.remix-icon-container {
  .remix-icon-container {
    min-height: calc(100vh - 205px);
    padding: 20px;
    background: white;
    transition: all .3s cubic-bezier(.645, .045, .355, 1), border 0s, color .1s, font-size 0s;

    ::v-deep.el-input__inner {
      height: 36px;
    }

    .el-button {
      padding: 10px 20px;
    }

    ::v-deep.el-form-item__label {
      font-weight: 400;
    }

    ::v-deep.el-input-number__decrease, ::v-deep .el-input-number__increase {
      height: 34px;

      i {
        vertical-align: -3px;
      }
    }

    .icons {
      ::v-deep.el-card__body {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 60px;
        max-height: 60px;
        padding: 14.2857142857px;
        cursor: pointer;
        text-align: center;

        &:hover {
          &:after {
            bottom: 0px;
          }

          & i {
            margin-bottom: 15px;
          }
        }

        &:after {
          position: absolute;
          bottom: -30px;
          width: 100%;
          padding: 4px 0;
          font-size: 12px;
          color: #fff;
          text-align: center;
          content: "点击复制";
          display: block;
          background-color: #1890FF;
          transition: all .3s cubic-bezier(.645, .045, .355, 1), border 0s, color .1s, font-size 0s;
        }

        i {
          text-align: center;
          pointer-events: none;
          cursor: pointer;
          transition: all .3s cubic-bezier(.645, .045, .355, 1), border 0s, color .1s, font-size 0s;
        }
      }

      .el-card {
        margin-bottom: 20px;
      }

      .icon-text {
        height: 30px;
        margin-top: -15px;
        overflow: hidden;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
    }
  }
}
</style>
